<template>
  <div class="comment">
    <!--    <div class="comment-header">-->
    <!--      <el-tooltip class="item" effect="dark" content="点我更换头像" placement="top-start">-->
    <!--        <div @click="handleClick">-->
    <!--          <input type="file" style="display: none" @change="dealWithdAvatar" ref="avatar"/>-->
    <!--          <el-avatar-->
    <!--              :src="-->
    <!--              avatarUrl-->
    <!--                ? avatarUrl-->
    <!--                : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'-->
    <!--            "-->
    <!--              :size="40"-->
    <!--          ></el-avatar>-->
    <!--        </div>-->
    <!--      </el-tooltip>-->
    <!--      <el-input-->
    <!--          :placeholder="placeholderText"-->
    <!--          v-model="context"-->
    <!--          class="input"-->
    <!--          type="textarea"-->
    <!--          resize="none"-->
    <!--          size="mini"-->
    <!--          :maxlength="contentLength"-->
    <!--          @focus="isShowSecReply(undefined)"-->
    <!--      ></el-input>-->
    <!--      <el-button-->
    <!--          type="info"-->
    <!--          style="height: 40px"-->
    <!--          @click="addComment(articleId, undefined)"-->
    <!--      >{{ buttonText }}-->
    <!--      </el-button>-->
    <!--    </div>-->
    <!--    <div class="comment-body" v-for="(item, index) in comments" :key="item._id + '' + index">-->
    <!--      &lt;!&ndash; 一级评论 &ndash;&gt;-->
    <!--      <div class="first-comment">-->
    <!--        <el-avatar :size="40" :src="item.avatarUrl"></el-avatar>-->
    <!--        <div class="content">-->
    <!--          &lt;!&ndash; 一级评论用户昵称 &ndash;&gt;-->
    <!--          <h3>{{ item.username }}</h3>-->
    <!--          &lt;!&ndash; 一级评论发布时间 &ndash;&gt;-->
    <!--          <span>{{ item.date }}</span>-->
    <!--          &lt;!&ndash; 一级评论评论内容 &ndash;&gt;-->
    <!--          <p>{{ item.content }}</p>-->
    <!--          &lt;!&ndash; 一级评论评论点赞 &ndash;&gt;-->
    <!--          <div class="comment-right">-->
    <!--            <i-->
    <!--                class="el-icon-trophy"-->
    <!--                @click="giveALike(item, item._id)"-->
    <!--                :class="item.favour.includes(userId) ? 'active' : ''"-->
    <!--            ></i>-->
    <!--            {{ item.favour.length || 0 }}-->
    <!--            <i-->
    <!--                class="el-icon-delete"-->
    <!--                @click="deleteComment(item._id, undefined)"-->
    <!--                v-if="userId === item.userId"-->
    <!--            >删除</i>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    &lt;!&ndash; 暂无评论的空状态 &ndash;&gt;-->
    <!--    <el-empty :description="emptyText" v-show="comments.length === 0"></el-empty>-->
    <!--手写静态-->
    <div>
      <!--存在评论时-->
      <div>
        <!-- 评论基本盒子单个-->
        <div class="flexBox cellBox" v-for="item in commentList" :key="item.id">
          <!--左侧 登陆人 以及职位-->
          <div class="flexBoxleft">
            <div style="font-size: 18px">{{ item.userName }}</div>
            <div>{{ item.youWork }}</div>
          </div>
          <!-- 右侧 吐槽详情 评分 以及日期-->
          <div class="flexBoxright" style="overflow: hidden">
            <!-- 上-->
            <div class="contentRight">
              <el-rate
                  v-model="value"
                  :allow-half=true
                  show-score
                  disabled
                  text-color="#ff9900"
                  score-template="{value}">
              </el-rate>
            </div>
            <!--中-->
            <div>
              吐槽详情
              <div>
                {{ item.detailedDescription }}
              </div>
              <!-- 下-->
            </div>
            <div>
            </div>
            <div style="overflow: hidden">
              <div class="contentRight">
                <div>{{ item.createTime }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--评论b不存在时-->
      <div>
        <el-empty v-show="this.commentList.length === 0"></el-empty>
      </div>
    </div>
    <!-- 分页器-->
    <div class="pageBox">
      <div class="block">
        <el-pagination
            layout="prev, pager, next"
            :total="50">
        </el-pagination>
      </div>
    </div>
    <!--添加评论-->
    <div class="commentPost">
      <header>发表回复</header>
      <!--评论表单 添加-->
      <div>
        <el-form ref="form" :model="addList" label-width="100px">
          <el-form-item label="企业评分：">
            <el-rate
                v-model="value"
                :allow-half=true
                show-score
                text-color="#ff9900"
                score-template="{value}">
            </el-rate>
          </el-form-item>
          <!--职位选择-->
          <el-form-item label="曾任职位：">
            <el-select v-model="addList.youWork" placeholder="请选择曾任职位">
              <el-option :label="item.zhiWeiName" :value="item.tbZhiweiId" v-for="item in zhiweiList"
                         :key="item.tbZhiweiId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详情描述：">
            <el-input type="textarea" v-model="addList.detailedDescription"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">发表</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import {addpl, comreviews, getzhiwei} from "@/api";

export default {
  props: {
    articleId: {
      //评论所属文章 id
      type: String
    },
    emptyText: {
      // 评论为空的时候显示的文字
      type: String,
      default: "期待你的评论！"
    },
    buttonText: {
      // 按钮文字
      type: String,
      default: "评论"
    },
    contentLength: {
      // 评论长度
      type: Number,
      default: 150
    },
    placeholderText: {
      // 默认显示文字
      type: String,
      default: "请输入最多150字的评论..."
    }
  },
  data() {
    return {
      // 添加评论
      formMap: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        youwork: ''
      },
      commentList: {},
      value: 3.7,
      // 接口传递数值
      datalist: {
        pageNum: 1,
        pageSize: 20,
        companyId: ''
      },
      // 获取的职位
      zhiweiList: '',
      comments: [
        {
          _id: "first0", // 评论id
          date: "2022.09.01", //创建日期
          username: "孤城浪人", //评论人
          userId: "1",
          avatarUrl:
              "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", //头像地址
          favour: ["1", "2", "3"], //点赞的用户id
          content: "评论的内容", //评论内容
          replyInfo: [
            //回复的内容
            {
              _id: "sec0", // 当前此条回复的id
              date: "2022.09.01", //创建日期
              replyName: "孤城浪人", //回复的对象
              username: "孤城浪人", //评论人
              userId: "1",
              favour: ["2", "3", "4"],
              avatarUrl:
                  "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
              content: "博主厉害了" //回复的内容
            }
          ]
        }
      ], // 获取得到的评论
      context: "", // 评论内容
      replyContext: "", //一级评论回复
      isShowSec: "", //是否显示次级回复框
      isClickId: "", //记录点击回复的评论id
      userId: "1", // 浏览器指纹
      username: "孤城浪人", //你的用户名
      firstIdx: 1,
      secIdx: 1,
      avatarUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      //新增评论
      addList: {
        userId: '',
        username: '',
        companyId: '',
        companyRating: '',
        spitDetails: '',
        youWork: ''
      }
    };
  },
  created() {
    // 获取全部职位
    getzhiwei().then(res => {
      this.zhiweiList = res.data
    })
    // 获取评论数据
    // this.getCommentList();
    // this.datalist.companyId = this.commentList.
    comreviews(this.datalist).then(res => {
      this.commentList = res.data.list
      //处理数据
      this.commentList.forEach(item => {
        switch (item.youWork) {
          case '1':
            item.youWork = 'java'
            break;
          case '2':
            item.youWork = 'web前端'
            break;
          case '3':
            item.youWork = 'C#'
            break;
          case '4':
            item.youWork = 'C++'
            break;
          case '5':
            item.youWork = 'Python'
            break;
          case '6':
            item.youWork = 'PHP'
            break;
          case '7':
            item.youWork = 'UI设计'
            break;
          case '8':
            item.youWork = '安卓开发'
            break;
          case '9':
            item.youWork = 'ios开发'
            break;
          case '10':
            item.youWork = '3D设计'
            break;
          case '11':
            item.youWork = '动画设计'
            break;
          case '12':
            item.youWork = '产品经理'
            break;
          case '13':
            item.youWork = '项目经理'
            break;
          case '14':
            item.youWork = '部门经理'
            break;
          case '15':
            item.youWork = '售前'
            break;
          case '16':
            item.youWork = '技术支持'
            break;
          default:
            return 0
        }
      })
    }).catch(error => {
      console.log(error)
    })
  },

  methods: {
    // 添加评论
    onSubmit() {
      // 修改bug
      localStorage.getItem('VUEX:STATE')
      console.log(this.$store.state.registerList.userId)
      // 添加
      console.log(this.addList.detailedDescription)
      this.addList.username = this.$store.state.registerList.username
      this.addList.userId = this.$store.state.registerList.userId
      this.addList.companyRating = this.value
      this.addList.companyId = 49
      // 调用添加接口
      addpl(this.addList).then(res => {
        console.log(res)
      })
      console.log(this.addList)
    },
    // 获取全部评论
    // 唤起文件选择
    handleClick() {
      this.$refs.avatar.click();
    },
    dealWithdAvatar(e) {
      const maxSize = 2 * 1024 * 1024;
      console.log(maxSize)
      const file = Array.prototype.slice.call(e.target.files)[0];
      console.log(file);
    },
    // 获取本篇文章所有评论
    async getCommentList() {
      try {
        this.comments = [];
        let id = "";
        if (this.articleId == "messageBoard") {
          id = "messageBoard";
        } else {
          id = this.articleId;
        }
        // 获取某篇文章下的所有评论
        const res = await this.$api.getCommentsOfArticle({id});
        this.comments = res.data.comments; //评论列表
        this.username = res.data.user?.username;
        this.avatarUrl = res.data.user?.avatarUrl;
      } catch (err) {
        this.$message.error(err);
      }
    },
    // 评论点赞
    giveALike(item, _id) {
      console.log(_id)
      try {
        // 不允许同一个人重复点赞
        if (item.favour?.includes(this.userId)) {
          this.$message.info("您已经点过赞啦！");
          return;
        }
        //判断是给一级评论点赞还是二级评论，只有二级评论会有replyName
        if (item.replyName) {
          // 给二级评论点赞，向后台提交数据
        } else {
          // 一级评论点赞，向后台提交数据
        }
        item.favour.push(this.userId);
      } catch (err) {
        this.$message.error(err);
      }
    },
    isShowSecReply(id) {
      if (id) {
        this.isShowSec = id;
        if (this.isClickId === this.isShowSec) {
          this.isShowSec = "";
        } else {
          this.isShowSec = id;
        }
        this.isClickId = this.isShowSec;
      } else {
        this.isShowSec = this.isClickId = "";
      }
    },
    deleteComment(_id, replyId) {
      if (replyId) {
        // 删除二级评论，提交请求到后端

        // 成功后从本地记录中删除该评论
        const temp = this.comments.find(item => item._id == _id).replyInfo;
        for (let i = 0; i < temp.length; i++) {
          if (temp[i]._id == replyId) {
            temp.splice(i, 1);
            break;
          }
        }
      } else {
        // 删除一级评论，提交请求到后端
        // 成功后从本地记录中删除该评论
        for (let i = 0; i < this.comments.length; i++) {
          if (this.comments[i]._id == _id) {
            this.comments.splice(i, 1);
          }
        }
      }
    },
    async addComment(id, replyName) {
      let res = {};
      // 评论添加成功，返回的数据
      //本地更新评论列表
      if (replyName) {
        // 添加二级评论
        if (!this.replyContext) {
          this.$message.warning("评论或留言不能为空哦！");
          return;
        }
        // 模拟数据提交成功后返回数据
        res.data = {
          username: this.username,
          userId: this.userId,
          avatarUrl: this.avatarUrl,
          _id: "sec" + this.secIdx++, // 评论id
          replyName,
          date: "2022.09.01", //创建日期
          favour: [], //点赞的用户id
          content: this.replyContext //评论内容
        };
        const comment = this.comments.find(item => item._id == id);
        if (!comment.replyInfo) {
          comment.replyInfo = [];
        }
        comment.replyInfo.push(res.data);
        this.replyContext = "";
      } else {
        // 添加一级评论，提交数据到后端
        if (!this.context) {
          this.$message.warning("评论或留言不能为空哦！");
          return;
        }
        // 模拟数据提交成功后返回数据
        res.data = {
          username: this.username,
          avatarUrl: this.avatarUrl,
          userId: this.userId,
          _id: "first" + this.firstIdx++, // 评论id
          date: "2022.09.01", //创建日期
          articleId: this.articleId, // 评论的文章id
          favour: [], //点赞的用户id
          content: this.context //评论内容
        };
        this.comments.push(res.data);
        this.context = "";
      }
      this.isShowSec = this.isClickId = "";
    }
  }
};
</script>

<style lang="scss" scoped>
.pageBox {
  width: 1280px;
  margin: auto;
  display: flex;
  background-color: white;
}

.contentRight {
  float: right;
}

.commentPost {
  margin-top: 10px;
  background-color: white;

  header {
    border-right: 1px solid;
    border-color: #dcdfe6;
    padding: 10px;
    //border-bottom: 1px solid black;
  }
}

.cellBox {
  background-color: white;
  height: 100px;
  border-bottom: 1px solid;
  border-color: #dcdfe6;
}

.comment {
  .flexBox {
    //text-align: center;
    display: flex;

    .flexBoxleft {
      border-right: 1px solid;
      border-color: #dcdfe6;
      text-align: center;
      width: 20%;
      padding: 10px;
      padding-top: 30px;
      //background-color: white;
    }

    .flexBoxright {
      width: 80%;
      padding: 10px;
    }
  }

  width: 1220px;
  min-height: 26vh;
  border-radius: 5px;
  margin-top: 2px;
  overflow: hidden;

  .active {
    color: rgb(202, 4, 4);
  }

  .comment-header {
    position: relative;
    height: 50px;
    padding: 10px 5px;
    display: flex;
    align-items: center;

    .input {
      margin-left: 10px;
      margin-right: 20px;

      ::v-deep .el-input__inner:focus {
        border-color: #dcdfe6;
      }
    }
  }

  .comment-body {
    min-height: 70px;
    padding: 10px 20px;
    font-size: 14px;

    .first-comment {
      display: flex;

      .input {
        ::v-deep .el-input__inner:focus {
          border-color: #dcdfe6;
        }
      }

      i {
        margin-right: 5px;
        margin-left: 1vw;
        cursor: pointer;

        &:nth-child(3) {
          color: rgb(202, 4, 4);
        }
      }

      .content {
        margin-left: 10px;
        position: relative;
        flex: 1;

        & > span {
          font-size: 12px;
          color: rgb(130, 129, 129);
        }

        .comment-right {
          position: absolute;
          right: 0;
          top: 0;
        }

        .reply-comment {
          height: 60px;
          display: flex;
          align-items: center;

          .reply-button {
            margin-left: 20px;
            height: 35px;
          }
        }

        .second-comment {
          display: flex;
          padding: 10px 0 10px 5px;
          border-radius: 20px;
          background: #ffffff;

          .to_reply {
            color: rgb(126, 127, 128);
          }
        }
      }
    }
  }
}
</style>
